<template>
  <div id="orderDetail">
    <div class="buttonBox">
      <el-button v-if="$api.buttonPower(90)" type="primary" @click="queryButton">官方查询</el-button>
      <el-button v-if="$api.buttonPower(77) && listData.status == $api.Enum.StatusActive" type="danger"
                 @click="refundButton">退款</el-button>
    </div>
    <el-card>
      <h3>订单信息</h3>
      <el-descriptions :column="2" :colon="false" label-class-name="dialogLabel" content-class-name="content">
        <el-descriptions-item v-for="(item, index) in tableItem" :key="index" :label="item.label">{{listData[item.prop]}}</el-descriptions-item>

        <el-descriptions-item label="状态">
          <div v-html="$api.status.orderStatus(listData.status, option[$api.Enum.DicTypeOrderStatus])"></div>
        </el-descriptions-item>

        <el-descriptions-item label="商家">
          <div>
            <el-descriptions :column="1">
              <el-descriptions-item v-for="(item, index) in tableGroup" :key="index" :label="item.label">
                {{ listData[item.prop] }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-descriptions-item>

        <el-descriptions-item label="套餐">
          <div>
            <el-descriptions :column="1">
              <el-descriptions-item v-for="(item, index) in tableCombo" :key="index" :label="item.label">
                {{ listData.combo[item.prop] }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card v-if="listData.status == $api.Enum.StatusDisable">
      <h3>退款信息</h3>
      <el-descriptions :column="2" :colon="false" label-class-name="dialogLabel">
        <el-descriptions-item v-for="(item, index) in refundTabel" :key="index" :label="item.label">{{refundData[item.prop] }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <myDialog ref="refundDialog" dialogTitle="订单退款" :body="true">
      <div class="refund">
        <el-form class="dialogForm">
          <el-form-item label="订单号">
            <el-input v-model="refundForm.order_sn" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="退款金额">
            <el-input v-model="refundForm.pay_amount" placeholder="请输入小于订单金额的退款额">
              <template slot="prepend">本订单金额{{ refundAmount }}</template>
            </el-input>
          </el-form-item>

          <el-form-item label="退款备注" class="textareaInput">
            <el-input v-model="refundForm.remark" placeholder="请输入退款备注" type="textarea"></el-input>
          </el-form-item>

          <el-form-item class="buttonBox">
            <el-button @click="$refs.refundDialog.dialog = false">取消</el-button>
            <el-button @click="submitRefund" type="danger">确定退款</el-button>
          </el-form-item>
        </el-form>
      </div>
    </myDialog>

    <myDialog ref="queryDialog" dialogTitle="官方查询" :body=true width="30%">
      <el-descriptions :column="1" :colon="false"
                       :label-style="{ 'width': '100px', 'text-align-last': 'justify', 'display': 'inline-block', 'font-weight': 'bold' }">

        <el-descriptions-item label="商户单号">{{ queryList.out_trade_no }}</el-descriptions-item>

        <el-descriptions-item label="支付单号">{{ queryList.transaction_id }}</el-descriptions-item>

        <el-descriptions-item label="交易时间">{{ queryList.create_dt }}</el-descriptions-item>

        <el-descriptions-item label="交易状态">{{ queryList.trade_state_desc }}</el-descriptions-item>

        <el-descriptions-item label="订单金额">{{ queryList.amount }}</el-descriptions-item>

        <el-descriptions-item label="交易类型">{{ queryList.trade_type }}</el-descriptions-item>

        <el-descriptions-item label="补充描述">{{ queryList.attach }}</el-descriptions-item>

      </el-descriptions>
    </myDialog>
  </div>
</template>

<script>
export default {
  name: "WuliankaDetaildialog",
  props:{
    data_id: Number,
  },
  data() {
    return {
      listData: {
        combo: {}
      },
      dialog: false,
      refundForm: {
        pay_amount: ''
      },
      queryList: {},
      tableItem: [
        { label: '额外', prop: 'additional' },
        { label: '订单编号', prop: 'order_sn' },
        { label: '渠道', prop: 'channel_name' },
        { label: '应用', prop: 'app_name' },
        { label: '识别号', prop: 'iccid' },
        { label: '手机号码', prop: 'msisdn' },
        { label: '来源', prop: 'source' },
        { label: '微信用户', prop: 'wxuser_name' },
        { label: '应付金额', prop: 'due_amount' },
        { label: '支付金额', prop: 'pay_amount' },
        { label: '创建时间', prop: 'create_dt' },
        { label: '完成时间', prop: 'finish_dt' },
        { label: '退款时间', prop: 'refund_dt' },
      ],
      tableGroup: [
        { label: '应用商名称', prop: 'agent_app_name' },
        { label: '应用商成本费用', prop: 'agent_app_cost_price' },
        { label: '应用商毛利润', prop: 'agent_app_gross_profit' },
        { label: '应用商净利润', prop: 'agent_app_net_profit' },
        { label: '应用商利润比例', prop: 'agent_app_profits_scale' },

        { label: '代理商名称', prop: 'agent_agency_name' },
        // { label: '代理商成本费用', prop: 'agent_agency_cost_price' },
        { label: '代理商毛利润', prop: 'agent_agency_gross_profit' },
        { label: '代理商净利润', prop: 'agent_agency_net_profit' },
        // { label: '代理商利润比例', prop: 'agent_agency_profits_scale' },

        { label: '零售商名称', prop: 'agent_retailer_name' },
        { label: '零售商成本费用', prop: 'agent_retailer_cost_price' },
        { label: '零售商毛利润', prop: 'agent_retailer_gross_profit' },
        { label: '零售商利润比例', prop: 'agent_retailer_profits_scale' },
      ],
      tableCombo: [
        { label: '套餐名', prop: 'name' },
        { label: '套餐类型', prop: 'combo_type_name' },
        { label: '包类型', prop: 'package_type_name' },
        { label: '生效月', prop: 'effect_month' },
        { label: '流量', prop: 'flow' },
        { label: '语音', prop: 'voice' },
        { label: '短信', prop: 'sms' },
      ],
      option: [],
      refundData: {},
      refundTabel: [
        { label: '接受用户', prop: 'accept_user_name' },
        { label: '订单号', prop: 'refund_sn' },
        { label: '退款金额', prop: 'pay_amount' },
        { label: '退款比例', prop: 'refund_ratio_name' },
        { label: '退款备注', prop: 'remark' },
        { label: '退款状态', prop: 'status_name' },
        { label: '创建时间', prop: 'create_dt' },
        { label: '执行时间', prop: 'exec_dt' },
      ],
      refundAmount: '',
    };
  },

  mounted() {
    if (this.$route.query.data_id){
      this.data_id = this.$route.query.data_id
    }
    console.log('orderDetail',this.data_id, this.$route)
    this.getOrderDetail()

    this.$api.foundation.dicListExtendCache(
      [this.$api.Enum.DicTypeOrderStatus], '', res => {
        this.option = res
      }
    )
    this.$api.power([], this.tableItem, res => {
      this.tableItem = res.tableItem
    })
    this.$api.power([], this.tableGroup, res => {
      this.tableGroup = res.tableItem
    })
  },
  methods: {
    getOrderDetail() {
      if (!this.data_id){
        return
      }
      this.dialog = true
      this.$api.order.orderDetail({id: this.data_id}, res => {
        if (!res.status) {
          return this.$message.error(res.message)
        }
        this.listData = res.data;
        this.listData.snap_agent_agency = this.listData.snap_agent_agency ? JSON.parse(this.listData.snap_agent_agency) : []
        this.listData.snap_agent_app = this.listData.snap_agent_app ? JSON.parse(this.listData.snap_agent_app) : []
        this.listData.snap_agent_retailer = this.listData.snap_agent_retailer ? JSON.parse(this.listData.snap_agent_retailer) : []
        this.listData.snap_card = this.listData.snap_card ? JSON.parse(this.listData.snap_card) : []
        this.listData.snap_combo = this.listData.snap_combo ? JSON.parse(this.listData.snap_combo) : []
        this.listData.snap_wxuser = this.listData.snap_wxuser ? JSON.parse(this.listData.snap_wxuser) : []
        if (this.listData.status == 3) {
          this.$api.order.refundDetail({ source_order_id: this.listData.id }, res => {
            this.refundData = res.data
          })
        }
      });
    },
    refundButton() {
      this.refundForm = { pay_amount: '' }
      this.refundForm.order_sn = this.listData.order_sn;
      this.refundForm.order_id = this.listData.id;
      this.refundForm.pay_amount = this.listData.pay_amount
      this.refundAmount = this.listData.pay_amount
      this.$refs.refundDialog.dialog = true
    },
    submitRefund() {
      this.refundForm.pay_amount = Number(this.refundForm.pay_amount)
      this.$api.order.refundCreate(this.refundForm, res => {
        if (res.status) {
          this.$message.success(res.message);
          this.$refs.refundDialog.dialog = false;
          this.$emit('submitSuccess', '')
        } else {
          this.$message.error(res.message);
        }
      });
    },
    queryButton() {
      this.$api.order.orderFind({ order_sn: this.listData.order_sn }, res => {
        if (res.status) {
          this.$refs.queryDialog.dialog = true
          this.queryList = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>
.contentBox {
  padding: 0 10px;
}

h3 {
  margin-bottom: 20px;
}

.buttonBox {
  padding: 0 20px;
  display: flex;
  margin-bottom: 15px;
}
</style>
<style lang="less">
#orderDetail {
  .label {
    width: 100px;
    text-align-last: justify;
    display: inline-block;
    font-weight: bold;
  }

  .content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 5;
  }
}
</style>